<script setup lang="ts">
import { onLoad, onLaunch } from "@dcloudio/uni-app";
import * as LoginApi from "@/api/appNumber";
import { ref, shallowRef, computed } from "vue";
import dayjs from "dayjs";
const IMG_URL = import.meta.env.VITE_BASE_URL_IMG;

const userInfo = shallowRef({});

const ageProps = computed(() => {
  if (!userInfo.value?.birthday) return "--";
  const birthday = dayjs(userInfo.value.birthday);
  const now = dayjs();
  const age = now.diff(birthday, "year");
  return age;
});

async function fetchData(id: string) {
  const res = await LoginApi.getNumberData(id);
  userInfo.value = res.data;
  console.log("userInfo", userInfo.value);
}

const nid = ref("");

onLoad((option) => {
  if (!option) return;
  fetchData(option.id);
  nid.value = option.id;
});
</script>

<template>
  <view>
    <view class="w-100 pt30 pb60">
      <view class="pr32 pl32 rowa">
        <view class="relative" @click="showSingleNoPopup(9)">
          <!-- <image v-if="userInfo.waitApprovedImg!=null" class="w328 br24 h328 blc "
						:src="userInfo.waitApprovedImg[0]" mode="aspectFill"></image> -->
          <image
            class="w328 br24 h328 blc"
            :src="
              userInfo?.avatar
                ? IMG_URL + userInfo?.avatar
                : 'https://wdwctech.com/img/nan-avatar.png'
            "
            mode="aspectFill"
          ></image>
          <view class="absolute w328 h328 rowjcic top0">
            <view
              class="w186 h52 lh52 tc cfff fs28 br10"
              style="background-color: rgba(0, 0, 0, 0.3)"
              >头像/封面
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="w690 p30 bcfff br20 ml30 mt35" style="margin-top: -30rpx">
      <view class="rowjbic">
        <view class="rowic">
          <image
            src="../../static/images/indexabout.png"
            class="w30 h30"
            mode="aspectFill"
          ></image>
          <view style="color: #434343" class="fs28 fwb ml10">基础资料</view>
        </view>
      </view>
      <view class="rowic mt40">
        <view
          class="fs40 fwb"
          style="color: #4a4a4a"
          v-if="userInfo.nickName"
          >{{ userInfo.nickName }}</view
        >
        <view class="fs40 fwb" style="color: #4a4a4a" v-else>本人</view>
        <image
          class="w48 h48 br-50 ml30"
          :src="
            userInfo.gender == 'MALE'
              ? '/static/images/like/male.png'
              : '/static/xiugai/nv.png'
          "
          mode="aspectFill"
        >
        </image>
      </view>
      <view class="fs28 fwb c333 rowic mt25">
        <view
          ><text v-if="ageProps">{{ ageProps }}</text
          ><text v-else>{{ ageProps }}</text
          >岁 · <text v-if="userInfo.height">{{ userInfo.height }}</text
          ><text v-else>{{ userInfo.height }}</text
          >cm · <text v-if="userInfo.star">{{ userInfo.star }}</text
          ><text v-else>双鱼座</text> ·
          <text v-if="userInfo.zodiac">{{ userInfo.zodiac }}</text
          ><text v-else>--</text>
        </view>
        <view
          class="fs24 w3 ml30 mr30 h24"
          style="background-color: #e0e2e8"
        ></view>
        <view>
          <text v-if="userInfo.city">{{ userInfo.city }} </text></view
        >
      </view>
      <view class="rowic mt36" v-if="userInfo.emotional != null">
        <image
          class="w42 h42"
          src="../../static/images/indexlable.png"
          mode="aspectFill"
        ></image>
        <view class="fs24 ml10 c333" v-if="userInfo.emotional == 'Single'"
          >正在寻觅</view
        >
        <view class="fs24 ml10 c333" v-if="userInfo.emotional == 'Love'"
          >热恋中</view
        >
      </view>
      <view class="w690 rowjbic mt56" style="margin-left: -30rpx">
        <view class="circle"></view>
        <view
          v-for="(item, index) in 10"
          :key="index"
          class="w30 h3"
          style="background-color: #c8d3e2"
        ></view>
        <view class="circleA"></view>
      </view>
      <view class="rowjbic warp mt25">
        <view
          v-if="userInfo.profession"
          class="w285 mt25 h60 tc fs28 c333 lh60 br100"
          style="background-color: #e5f4ff"
        >
          职业：{{ userInfo.profession }}</view
        >
        <view
          v-if="userInfo.annualSalary"
          class="w285 mt25 h60 tc fs28 c333 lh60 br100"
          style="background-color: #ffe3de"
          >年薪：
          <text v-if="userInfo.annualSalary == 'Less_Ten'">小于10w</text>
          <text v-if="userInfo.annualSalary == 'Ten_Two'">10w到20w</text>
          <text v-if="userInfo.annualSalary == 'Two_Three'">20w到30w</text>
          <text v-if="userInfo.annualSalary == 'Three_Five'">30w到50w</text>
          <text v-if="userInfo.annualSalary == 'Five_Hundred'">50w到100w</text>
          <text v-if="userInfo.annualSalary == 'Greater_Hundred'"
            >大于100w</text
          >
          <text v-if="userInfo.annualSalary == 'Secrecy'">保密</text>
        </view>
      </view>
    </view>
    <view class="w690 p30 bcfff br20 mt30 ml30 p30">
      <view class="rowjbic mt30">
        <view class="fs28 fwb" style="color: #434343">学历认证</view>
        <!-- <view class="fs24" style="color: #434343;" v-if="userInfo.school">
					{{userInfo.school}}
					<text class="ml10"></text>
					<text v-if="userInfo.education=='Specialty'">专科</text>
					<text v-if="userInfo.education=='Undergraduate'">本科</text>
					<text v-if="userInfo.education=='Master'">硕士</text>
					<text v-if="userInfo.education=='Doctor'">博士</text>
					·
				</view> -->
        <view class="fs24" style="color: #434343">
          北京大学
          <text class="ml10"></text>
          <text>{{ userInfo?.education || "本科" }}</text>
        </view>
      </view>
    </view>
    <view class="w690 p30 bcfff br20 mt30 ml30 p30">
      <view class="rowjbic">
        <view class="rowic">
          <image
            class="w30 h30"
            src="/static/images/indexinterest.png"
            mode="aspectFill"
          ></image>
          <view style="color: #434343" class="fs28 fwb ml10">关于我自己</view>
        </view>
      </view>
      <view class="mt25 fs28" style="color: #434343">
        <!-- <view>{{userInfo.aboutMe}}</view> -->
        <view>{{ userInfo?.introduce || "我最帅我最美快来关注我" }}</view>
      </view>
    </view>
    <view class="w690 p30 bcfff br20 mt30 ml30 p30">
      <view class="rowjbic">
        <view class="rowic">
          <image
            class="w30 h30"
            src="/static/images/indexlove.png"
            mode="aspectFill"
          ></image>
          <view style="color: #434343" class="fs28 fwb ml10">兴趣爱好</view>
        </view>
      </view>
      <view class="mt25 fs28" style="color: #434343">
        <!-- <view>{{userInfo.interest}}</view> -->
        <view>{{ userInfo?.interest || "--" }}</view>
      </view>
    </view>
    <view class="w690 p30 bcfff br20 mt30 ml30 p30">
      <view class="rowjbic">
        <view class="rowic">
          <image
            class="w30 h30"
            src="/static/images/indexcharacter.png"
            mode="aspectFill"
          ></image>
          <view style="color: #434343" class="fs28 fwb ml10">心仪的Ta</view>
        </view>
      </view>
      <view class="mt25 fs28" style="color: #434343">
        <!-- <view>{{userInfo.loveRequirement}}</view> -->
        <view>希望你是个有趣的人</view>
      </view>
    </view>
    <view class="h40"></view>
  </view>
</template>

<script></script>

<style lang="scss">
::v-deep .uni-slider-handle-wrapper {
  background-color: #000000;
}

page {
  background-color: #f4f5f9;
}

view,
scroll-view,
swiper,
button,
input,
textarea,
label,
image {
  box-sizing: border-box; //设置padding和border 不会改变盒子原有的大小
}

.h3 {
  height: 3rpx;
}

.mt30 {
  margin-top: 30rpx;
}

.h60 {
  height: 60rpx;
}

.lh60 {
  line-height: 60rpx;
}

.w285 {
  width: 285rpx;
}

.mt56 {
  margin-top: 56rpx;
}

.h42 {
  height: 42rpx;
}

.w42 {
  width: 42rpx;
}

.mt36 {
  margin-top: 36rpx;
}

.h24 {
  height: 24rpx;
}

.mr30 {
  margin-right: 30rpx;
}

.w3 {
  width: 3rpx;
}

.mt25 {
  margin-top: 25rpx;
}

.h48 {
  height: 48rpx;
}

.w48 {
  width: 48rpx;
}

.fs40 {
  font-size: 40rpx;
}

.mt40 {
  margin-top: 40rpx;
}

.br100 {
  border-radius: 100rpx;
}

.w120 {
  width: 120rpx;
}

.ml10 {
  margin-left: 10rpx;
}

.fwb {
  font-weight: bold;
}

.h30 {
  height: 30rpx;
}

.w30 {
  width: 30rpx;
}

.rowic {
  display: flex;
  align-items: center;
}

.mt35 {
  margin-top: 35rpx;
}

.ml30 {
  margin-left: 30rpx;
}

.br20 {
  border-radius: 20rpx;
}

.bcfff {
  background-color: #ffffff;
}

.p30 {
  padding: 30rpx;
}

.w690 {
  width: 690rpx;
}

.relative {
  position: relative;
}

.bc000 {
  background-color: #000000;
}

.fs99 {
  font-size: 99rpx;
}

.br24 {
  border-radius: 24rpx;
}

.h150 {
  height: 150rpx;
}

.w150 {
  width: 150rpx;
}

.warp {
  flex-wrap: wrap;
}

.pr30 {
  padding-right: 30rpx;
}

.rowjbic {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ml30 {
  margin-left: 30rpx;
}

.crowjb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.br10 {
  border-radius: 10rpx;
}

.h52 {
  height: 52rpx;
}

.lh52 {
  line-height: 52rpx;
}

.w186 {
  width: 186rpx;
}

.top0 {
  top: 0rpx;
}

.absolute {
  position: absolute;
}

.rowjcic {
  display: flex;
  justify-content: center;
  align-items: center;
}

.blc {
  background: #eee;
}

.h328 {
  height: 328rpx;
}

.br24 {
  border-radius: 24rpx;
}

.w328 {
  width: 328rpx;
}

.pt40 {
  margin-bottom: 40rpx;
}

.pl32 {
  padding-left: 32rpx;
}

.pr32 {
  padding-right: 32rpx;
}

.lh44 {
  line-height: 44rpx;
}

.fs28 {
  font-size: 28rpx;
}

.c333 {
  color: #333333;
}

.ml14 {
  margin-left: 14rpx;
}

.fs24 {
  font-size: 24rpx;
}

.lh32 {
  line-height: 32rpx;
}

.tc {
  text-align: center;
}

.br-50 {
  border-radius: 50%;
}

.cfff {
  color: #ffffff;
}

.h32 {
  height: 32rpx;
}

.mt8 {
  margin-top: 8rpx;
}

.w-100 {
  width: 100%;
}

.pt30 {
  padding-top: 30rpx;
}

.pb60 {
  padding-bottom: 60rpx;
}

.pr40 {
  padding-right: 40rpx;
}

.pl72 {
  padding-left: 72rpx;
}

.pb60 {
  padding-bottom: 60rpx;
}

.rowa {
  display: flex;
}

.mw32 {
  max-width: 32rpx;
  min-width: 32rpx;
}

.circle {
  width: 33rpx;
  height: 66rpx;
  border-radius: 0 33rpx 33rpx 0;

  background-color: #f4f5f9;
}

.circleA {
  width: 33rpx;
  height: 66rpx;
  border-radius: 0 33rpx 33rpx 0;
  transform: rotate(180deg);
  background-color: #f4f5f9;
}

.slider-box {
  margin: 0 0;
}

// 单列不滚动
.singleNo {
  width: 100%;
  height: auto;
  background-color: #f7f7f7;

  .singleNo-item {
    width: 100%;
    height: 108rpx;
    background-color: #fff;
    line-height: 108rpx;
    text-align: center;
    font-weight: 400;
    color: #000000;
    font-size: 32rpx;
    border-bottom: 2rpx solid #f7f7f7;
    // -webkit-background-clip: text;
  }

  .linkage-close {
    width: 750rpx;
    height: 108rpx;
    text-align: center;
    line-height: 108rpx;
    font-size: 32rpx;
    font-weight: 400;
    background-color: #fff;
    margin-top: 16rpx;
  }
}
</style>
